<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Panel信息配置</title>
		<%@include file="/WEB-INF/ibnms/common/jqgrid.jsp"%>
		<%@ include file="/WEB-INF/ibnms/common/formValidation.jsp"%>
        <jsp:include page="/WEB-INF/ibnms/common/configinclude.jsp"></jsp:include>
        <script language="javascript">
            String.prototype.Trim  = function(){return this.replace(/^\s+|\s+$/g,"");}
            $(function(){
                //$("select[multiple='multiple']").multiselect();
            });
        </script>
        <style type="text/css">
            ul.ui-helper-reset{
                width: auto;
            }
            label{
                width: 16em;
            }
        </style>
    </head>

    <body onload="initVar()">
        <div class="form-wrapper">
            <div class="form-title">
	       		 <span class="ttcorner"></span>
	             <h3>
	                <span class="text">Panel信息配置</span>
	             </h3>
	        </div>
	        <div class="box-in">
            <form id="theForm" action="<s:url action="saveOrUpdatePorlet"/>" method="post">
            	<table class="table-03" border="0" cellpadding="0" cellspacing="0" >
                    <tr>
                        <td width="20%" class="monitor_bg1">Panel ID<font color="#FF0000">*</font> ：</td>
                        <td width="80%" class="monitor_bg1">
                            <input type="hidden" name="porletForm.cmd" value="${porletForm.cmd}"></input>
                            <s:if test="%{porletForm.cmd=='update'}">
                            	<input type="text" name="porletForm.porletId" id="porletId" class="input-style1 validate[required]" value='${porletForm.porletId}' readonly/>
							</s:if>
							<s:else>
								<input type="text" name="porletForm.porletId" id="porletId" class="input-style1 validate[required]" value='${porletForm.porletId}'/>
							</s:else>
                        </td>
                    </tr>
                    <tr>
                        <td width="20%" class="monitor_bg1">Panel名称<font color="#FF0000">*</font>：</td>
                        <td width="80%" class="monitor_bg1" >
                            <input type="text" name="porletForm.title" id="title" class="input-style1 validate[required]" value='${porletForm.title}'/>
                        </td>
                    </tr>
                    <tr>
                        <td width="20%" class="monitor_bg1">初始高度<font color="#FF0000">*</font>：</td>
                        <td width="80%" class="monitor_bg1" >
                            <input type="text" name="porletForm.height" id="height" class="input-style1 validate[required]" value='${porletForm.height}'/>(px)
                        </td>
                    </tr>
                    <tr>
                        <td class="monitor_bg1">默认路径<font color="#FF0000">*</font>：</td>
                        <td class="monitor_bg1">
                            <table class="var-table" id="var-table" width="100%" border="0" cellpadding="0" cellspacing="0">
                            	<tr class="url-tr">
                            		<td>
                            			<input type="hidden" name="porletForm.contentUrl" id="url"></input>
                            			<input type="text" id="contentUrl" name="contentUrl" size=100 value='${porletForm.contentUrl}' class="input-style1 validate[required]"/>
                            		</td>
                            	</tr>
								<tr class="url-tr-template" style="display:none">
									<td>
										<input type="text" id="contentUrl" name="contentUrl" size=100 value='${porletForm.contentUrl}' class="input-style1 validate[required]"/>
										<img src='<%=application.getContextPath()%>/nresources/ued/images/icon-winclose.gif' class='img-delurl' height='14' width='14' title="删除"/>
									</td>
								</tr>
							</table>
							<input type="button" id="btn-addurl" class="btn-addurl" value="添加路径"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="monitor_bg1">最大化路径<font color="#FF0000">*</font>：</td>
                        <td class="monitor_bg1">
                            <input type="text" name="porletForm.maxUrl" id="maxUrl" size=100 class="input-style1 validate[required]" value='${porletForm.maxUrl}'/>
                        </td>
                    </tr>
                    <tr>
                        <td class="monitor_bg1">切换时间(秒)：</td>
                        <td>
                            <select name="porletForm.second" style="width:40px"> 
                            	<s:bean name="org.apache.struts2.util.Counter">
									<s:param name="first" value="1" />
									<s:param name="last" value="10" />
									<s:iterator>
		                               	<option value="<s:property />"
											<s:if test="%{porletForm.second!=null && porletForm.second==(current-1)}">selected="selected"</s:if>>
											<s:property />
										</option>
									</s:iterator>
                               	</s:bean>
                            </select>
                            注：如果只有一个url，不用选
                        </td>
                    </tr>
                    <tr>
                        <td class="monitor_bg1">所属角色<font color="#FF0000">*</font>：</td>
                        <td class="monitor_bg1">
                            <select id="alreadySelect" name="porletForm.roleIds" multiple="multiple" style="width:200px"> 
                            	<s:iterator value="roleList" var="role">
                            		<s:if test='%{porletForm.roleIds.contains(ROLE_ID)}'>
                                		<option value="<s:property value="#role.ROLE_ID"/>" selected><s:property value="#role.ROLE_NAME"/></option>
                                	</s:if>
                                	<s:if test='%{porletForm.roleIds==null || !porletForm.roleIds.contains(ROLE_ID)}'>
                                		<option value="<s:property value="#role.ROLE_ID"/>"><s:property value="#role.ROLE_NAME"/></option>
                                	</s:if>
                                </s:iterator>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="monitor_bg1">描述：</td>
                        <td class="monitor_bg1">
                        	<textarea name="porletForm.description" id="description" cols="80" rows="3">${porletForm.description}</textarea>
                            </td>
                        </tr>
                        <tfoot class="tablewhitebg">
                            <tr >
                                <td colspan="2" nowrap >
                                    <div align="center" >
                                        <input type="button" id="btn-save" class="btn-style02" value="保存"/>
                                        &nbsp;&nbsp;
                                        <input type="button" class="btn-style02" value="重置"
                                               onclick="resetForm();" />
                                        &nbsp;&nbsp;
                                        <input type="button" class="btn-style02" value="返回"
                                               onclick="back()" />
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
	            	</table>
	            </form>
	        </div>
        </div>
    </body>
    <script language="javascript">
    
    	function back(){
			window.location.href="<s:url action='porletList.do' namespace='/'/>";
		}
		
        $("#btn-save").click(function() {
        	
        	if($("#alreadySelect").val()==null){
        		alert("请选择角色");
        		return false;
        	}
			
        	var _inputVar = [];
			$(".url-tr").each(function(i) {
				var contentUrl = $(this).find("input[name='contentUrl']").val();
				_inputVar.push({url:contentUrl});
			});
			$("#url").val($.toJSON(_inputVar));
			
			$("#theForm").submit();
		});
		
		$("#theForm").validationEngine().ajaxForm({
			type:"post",
			beforeSubmit:function() {
		        $("body").mask('正在保存,请稍后...');
			},
			success:function(data) {
				$("body").unmask();
				if (data == "true"){
					window.location.href="<s:url action='porletList' namespace='/'/>";
				} else {
					alert("保存失败："+data);
				}
			},
			error:function(xhr){
				$("body").unmask();
			   show_error(xhr);
			}
		});	
		
		$("#btn-addurl").click(function() {
			var param = $(".url-tr-template").clone(true);
			param.insertBefore(".url-tr-template").show().removeClass("url-tr-template").addClass("url-tr");
		});
		$(".img-delurl").click(function() {
			$(this).parent('td').parent('tr').remove();
		});
		
		
		function resetForm(){
			$('#theForm')[0].reset();
			
			var obj = null;
			var content = '${porletForm.contentUrl}';
			if(content!=""){
				obj = $.parseJSON(content);
				var i = 0;
				for (var one in obj)
			    {
			    	$("input[name='contentUrl']")[one].value = obj[one].url;
			    }
			}
		}
		
		function initVar(){
			var obj = null;
			var content = '${porletForm.contentUrl}';
			if(content!=""){
				obj = $.parseJSON(content);
				
				var i = 0;
				for (var one in obj)
			    {
			    	if(i==0){
			    		$("input[name='contentUrl']").val(obj[one].url);
			    	}else{
				    	var param = $(".url-tr-template").clone(true);
						param.insertBefore(".url-tr-template").show().removeClass("url-tr-template").addClass("url-tr");
						
						$("input[name='contentUrl']",param).val(obj[one].url);
					}
					i++;
			    }
			}
		}
    </script>
</html>
